<template>

  <div class="wc-schedule" v-on:scroll="showTop">
    <mt-header title="赛程表">
      <router-link to="/" slot="left">
       <mt-button class="iconfont">&#xe6b8;</mt-button>
      </router-link>
      <span class="time-area" slot="right" v-on:click="timePop=true">{{timeArea}}
       <div class="popover" v-bind:style="timePop?'display:block;':'display:none;'">
        <div class="popover-content">
          <div class="popover-arrow"></div>
          <div class="popover-inner">
            <ul>
              <li v-on:click.stop="changeTimeArea('当地时间')">当地时间</li>
              <li v-on:click.stop="changeTimeArea('北京时间')">北京时间</li>
            </ul>
          </div>
        </div>

      </div>
      </span>

    </mt-header>

    <div class="screen">
      <!--<label>队伍:</label><span class="select" v-on:click="()=>{popupVisible=true}">{{city}}</span>-->


      <mt-navbar v-model="selected">
        <mt-tab-item id="1">球队</mt-tab-item>
        <mt-tab-item id="2">城市</mt-tab-item>
      </mt-navbar>



      <!-- tab-container -->
      <mt-tab-container v-model="selected" v-bind:class="(selected>0?'show':'hide')+' tab-container'" >
        <mt-tab-container-item id="1">
          <div class="screen-content">
          <span class="select" v-on:click="() => {popupVisible=true}">{{ncountry}}</span>
          <div class="hot">
            <p>热门球队</p>
            <div>
              <template v-for="item in hotCountry">
                <span v-bind:class="ncountry==item.name?'current':''" v-on:click="onValuesChange(null,[item.name])">{{item.name}}</span>
              </template>
            </div>

          </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div class="screen-content">
            <span class="select" v-on:click="() => {playPopupVisible=true}">{{city}}</span>
            <div class="hot">
              <p>热门城市</p>
              <div>
                <template v-for="item in hotCity">
                  <span v-bind:class="city==item?'current':''" v-on:click="onCityChange(null,[item]);">{{item}}</span>
                </template>
              </div>

            </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>


    </div>

    <div class="lead-bar">

      <ul class="items">
        <li v-bind:class="mIndex==-1?'current':''" v-on:click="changeIndex(index==1?0:1)">
          <span>{{index==1?'淘汰赛':'小组赛'}}</span>
        </li>

        <template v-for="(item, i) in (index==1?m2:m1)">
          <li v-on:click="changeM(i)" v-bind:class="mIndex==i?'current':''">
            <span>{{ item }}</span>
          </li>
        </template>


      </ul>
    </div>

    <div class="match-list" v-on:click="selected=0;timePop=false">

      <ul>
        <li v-for="item in items" v-if="(item.city==city||city=='所有城市')&&((item.homeTeam==ncountry||item.awayTeam==ncountry)||ncountry=='所有球队')">
          <div class="country">{{item.homeTeam}}</div>
          <div class="flag"><img v-bind:src="item.homeTeamImg"/></div>
          <div class="date">
            <img src="../../assets/images/vs.png" />
            <h4>{{item.city}}</h4>
            <span v-bind:class="item.homeScore!=null?'score':''">{{item.homeScore!=null?(item.homeScore+':'+item.awayScore):item.time}}</span>
          </div>
          <div class="flag"><img v-bind:src="item.awayTeamImg"/></div>
          <div class="country">{{item.awayTeam}}</div>
        </li>
      </ul>

    </div>

    <mt-popup
      v-model="popupVisible"
      position="bottom">
      <div v-on:touchmove.prevent="">
        <div class="picker-nav">
          <span class="cancel" v-on:click="popCancel">取消</span>
          <span class="sure" v-on:click="changeOver">确定</span>
        </div>
        <mt-picker ref="countryPicker" :slots="slots" @change="onValuesChange"></mt-picker>
      </div>

    </mt-popup>
    <mt-popup
      v-model="playPopupVisible"
      position="bottom">
      <div v-on:touchmove.prevent="" >
        <div class="picker-nav">
          <span class="cancel" v-on:click="popCancel">取消</span>
          <span class="sure" v-on:click="changeOver">确定</span>
        </div>
        <mt-picker ref="cityPicker" :slots="slotsCity" @change="onCityChange"></mt-picker>
      </div>

    </mt-popup>



    <div v-on:click="toTop" v-bind:class="'top '+(showTopIcon?'show':'hide')"><img src="../../assets/images/iconfont/top.svg" /></div>

  </div>





</template>

<script>

  import {getGameGroup,getKnock,getCountry,getHotCountry,getHotCity,getAllCity} from './api'
  export default {
    name: "schedule",
    methods: {
      toTop:function(e){
        console.log(e)
        e.path[2].scrollTop=0
      },
      showTop:function(e){
        if(e.target.scrollTop>80&&this.showTopIcon==false){
          console.log(true);
          this.showTopIcon=true
        }else if(e.target.scrollTop<80&&this.showTopIcon){
          console.log(false);
          this.showTopIcon=false
        }
      },
      changeTimeArea:function(t){
        this.timeArea=t
        this.timePop=false;
        this.fetch();
      },
      popCancel:function(){
        this.popupVisible=false
        this.playPopupVisible=false
      },
      changeOver:function(){
        this.popupVisible=false
        this.playPopupVisible=false
        this.city=this.tmpCity
        this.ncountry=this.tmpCountry
        this.selected=0
        this.fetch();
      },
      onValuesChange:function(v,i){
        if(this.ncountry==i[0]){
          this.tmpCountry='所有球队'
        }else{
          this.tmpCountry=i[0];
        }

        this.tmpCity='所有城市';
          // this.$refs.cityPicker.setValues(['所有城市'])
        // this.$refs.countryPicker.setValues(i)
      },
      onCityChange:function(v,i){
        if(this.tmpCity==i[0]){
          this.tmpCity='所有城市'
        }else{
          this.tmpCity=i[0];
        }
        this.tmpCountry='所有球队';
      },
      changeIndex:function(index){
        this.index=index;
        this.mIndex=0;
        this.fetch();
      },
      changeM:function(mIndex){
        this.mIndex=mIndex
        this.fetch();
      },
      fetch: function () {
        if(this.index==0){
          getGameGroup({city:this.city=='所有城市'?'':this.city,zone:this.timeArea=="当地时间"?'':'china'}).then( (rs) => {
            if(rs.code==0){
              this.items=rs.data
            }
          })
        }else{
          getKnock({type:'',zone:this.timeArea=="当地时间"?'':'china'}).then( (rs) => {
            if(rs.code==0){
              this.items=rs.data
            }
          })
          getCountry().then((rs) => {
            if(rs.code==0){
              const c=[this.slots[0].values[0]]
              rs.data.map((h) => {
                c.push(h.name)
              })
              this.slots[0].values=c
            }
          })
        }
      }

    },
    created:function(){
      // alert(window.innerWidth)

      // const viewport = document.querySelector('meta[name="viewport"]')
      // const scale = window.innerWidth/375
      document.documentElement.style.fontSize='37px'
      // viewport.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no')


      this.fetch()
      getHotCountry(3).then((rs) => {
        if(rs.code==0){
          this.hotCountry=rs.data
        }
      })
      getHotCity().then((rs) => {
        if(rs.code==0){
          this.hotCity=rs.data
        }
      })
      getAllCity().then((rs) => {
        if(rs.code==0){
          this.slotsCity[0].values=['所有城市'].concat(rs.data)
        }
      })
      getCountry().then((rs) => {
        if(rs.code==0){
          const c=[this.slots[0].values[0]]
          rs.data.map((h) => {
            c.push(h.name)
          })
          this.slots[0].values=c
        }
      })
     /* this.$watch('popupVisible', function (newValue, oldValue) {
        if(!newValue){

        }
      })*/
    },
    data() {
      return {
        showTopIcon:false,
        hotCity:[],
        hotCountry:[],
        selected:0,
        screen:0,
        playPopupVisible:false,
        popupVisible:false,
        timePop:false,
        timeArea:'当地时间',
        mIndex: 0,
        index: 0,
        country:[],
        m1: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
        m2: ['1/8', '1/4', '半决赛', '三四', '决赛'],
        items: [
          {
            homeTeam: '德国',
            homeTeamImg: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3063720342,2929252299&fm=58&bpow=1280&bpoh=768',
            awayTeam: '西班牙',
            time: '08-12',
            awayTeamImg: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2223909248,1406042729&fm=58&bpow=1280&bpoh=853'
          }

        ],
        tmpCity:'所有城市',
        city:'所有城市',
        ncountry:'所有球队',
        tmpCountry:'所有球队',
        slots:[{
          flex:1,
          values: ['所有球队']
        }],
        slotsCity:[{
          flex:1,
          values: ['所有城市']
        }]
      }
    }

  }
</script>

<style lang="less" scoped>
  @import '~assets/less/variable.less';

  .mint-popup{
    .picker-nav{
      display: flex;
    }
    span{
      display: block;
      font-size: 16px;
      color: @color-add-blue;
      line-height: 2em;
      padding: 0 8px;
    }
    .cancel{
      flex: 1;
    }
    .sure{
      text-align: right;
      flex: 1;
    }
  }

  .wc-schedule{
    font-size: 16px;

    height: 100%;
    overflow-y:scroll ;
    /*overflow-scrolling:touch;*/
    -webkit-overflow-scrolling: touch;

    .top{
      position: absolute;
      bottom: 40px;
      right: 30px;
      z-index: 99;
      width: 40px;
      border-radius: 20px;
      background: #fff;
      img{
        width: 100%;
      }
    }

    .top.hide{
      display: none;
    }

    .popover{
      width: 113px;
      position: absolute;
      z-index: 99;
      top: 36px;
      right: 10px;

      .popover-content{
        border-radius: 3px;
        box-shadow: 0 0 2px rgba(0,0,0,.21);
      }
      .popover-arrow{
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 1px;
        background-color: #fff;
        transform: rotate(45deg);
        z-index: 0;
        box-shadow: 0 0 2px rgba(0,0,0,.21);
        top:-3.5px;
        right: 8px;
      }

      .popover-inner{
        position: relative;
        color: #000;
        background-color: #fff;

        overflow: hidden;
      }

      ul{
        text-align: left;
        li{
          height: 36px;
          line-height: 36px;
          padding: 0 6px;
          border-bottom: 1px solid @color-line-grey;
        }
      }
    }


    .time-area{
      color: @color-add-blue;
    }

    .mint-popup-bottom{
      width: 100%;
    }

    .screen{

      box-shadow: 0px 2px 4px @color-add-gray;

      .tab-container{
        display: block;
        overflow: hidden;
        transition: height 500ms;
      }

      .hot{

      }
      .show{
        height: 65px;
        display: block;

      }
      .hide{
        height: 0;
      }

      .screen-content{
        width: 100%;
        padding: 10px;
        .hot{
          display: none;
          font-size: 14px;
          p{
            margin-bottom: 6px;
          }
          span{
            display: inline-block;
            padding: 4px 4px;
            margin-right: 6px;
            border-radius: 4px;
            border: 1px solid @color-add-gray;
            cursor: pointer;
          }
          .current{
            color: @color-add-red;
            border-color: @color-add-red;
          }
        }
      }
      .select{
        display: block;
        box-sizing: border-box;
        border: 1px solid @color-line-grey;
        padding: 6px;
        margin: 8px 0;
      }
    }
  }

  .lead-bar {
    display: none;
    .items {
      margin: 6px 0;
      display: flex;
      li {
        float: left;
        flex: 1;
        align-items: center;
        text-align: center;
        span {
          display: inline-block;
          padding: 4px 0;
          border-bottom: 2px solid transparent;
        }
      }
      li:first-child {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        padding: 0 6px;
        span {
          border-bottom-color: @color-add-blue;
        }

      }
      li.current {
        color: @color-add-red;
      }
    }
  }

  .match-list {
    clear: both;
    li {
      display: flex;
      align-items: center;
      padding: 14px 0;
      border-top: 1px solid @color-line-grey;
      .country {
        flex: 1;
        text-align: center;
        font-size: 14px;
      }
      .flag {
        text-align: center;
        flex: 0.7;
        img{
          max-width: 100%;
        }
      }
      .date {
        text-align: center;
        flex: 1.5;
        .score{
          font-size: 18px;
        }
        img{
          width: 40px;
        }
        h4 {
          font-size: 16px;
          margin-bottom: 4px;
        }
        span{
          font-size: 12px;
        }
      }

    }
  }


</style>
